<template>
  <div>
    <div>
      <v-select
          v-model="condF.key"
          auto-select-first
          :items="fields"
          outlined
          style="font-size: 16px; color: black; display: inline-block; margin-left: 5%; width: 25%"
      ></v-select>
      <v-text-field label="请输入搜索内容"
                    v-model="condF.content"
                    clearable
                    outlined
                    style="display: inline-block; float: right; margin-right: 5%; width: 64%"
                    v-on:keyup.enter.native="advancedSearch"
      ></v-text-field>
    </div>

    <div v-for="(item, index) in condL.list" :key="index">
      <div style="display: inline-block; margin-left: 2.8%" @click="rmCondList(index)">
        <v-icon>
          {{icons.mdiMinusCircleOutline}}
        </v-icon>
      </div>
      <v-select
          v-model="item[0]"
          auto-select-first
          :items="types"
          outlined
          style="font-size: 16px; color: black; display: inline-block; margin-left: 0%; width: 10%"
      ></v-select>
      <v-select
          v-model="item[1]"
          auto-select-first
          :items="fields"
          outlined
          style="font-size: 16px; color: black; display: inline-block; margin-left: 1%;width: 14%"
      ></v-select>
      <v-text-field label="请输入搜索内容"
                    v-model="item[2]"
                    clearable
                    outlined
                    style="display: inline-block; float: right; margin-right: 5%; width: 64%"
                    v-on:keyup.enter.native="advancedSearch"
      ></v-text-field>
    </div>


    <div style="text-align: center">
      <v-btn
          outlined
          color="indigo"
          style="font-size: 16px; width: 15%; margin-bottom: 10px"
          @click="addList"
      >
        <v-icon>
          {{ icons.mdiPlus }}
        </v-icon>
        添加行
      </v-btn>
      <v-btn
          outlined
          color="indigo"
          style="font-size: 16px; margin-left: 5%; width: 15%; margin-bottom: 10px"
          @click="rmAll"
          :disabled="this.condL.list.length === 0"
      >
        <v-icon>
          {{ icons.mdiClose }}
        </v-icon>
        清除
      </v-btn>
      <v-btn
          outlined
          color="indigo"
          style="font-size: 16px; margin-left: 5%; width: 15%; margin-bottom: 10px"
          @click="advancedSearch"
      >
        <v-icon>
          {{ icons.mdiMagnify }}
        </v-icon>
        检索
      </v-btn>
    </div>

  </div>
</template>

<script>
import {
  mdiMinusCircleOutline,
  mdiPlus,
  mdiClose,
  mdiMagnify,
} from "@mdi/js";

export default {
  name: "ResearcherCard",
  props:{
    condFirst: Object,
    condList: Object,
    advancedSearch : {
      type: Function
    },
  },
  data() {
    return {
      condF:this.condFirst,
      types:["AND","OR","NOT"],
      fields:[ "姓名", "机构", "关键词" ],
      cond0:[ "AND", "关键词", null],
      condListLength:0,
      condL: this.condList,
      times:[],
      icons: {
        mdiMinusCircleOutline,
        mdiPlus,
        mdiClose,
        mdiMagnify,
      }
    }
  },
  methods :{
    addList() {
      let tmp = JSON.parse(JSON.stringify(this.cond0))
      this.condL.list.push(tmp)
    },
    rmCondList(index) {
      this.condL.list.splice(index, index + 1);
    },
    rmAll() {
      this.condL.list.splice(0, this.condL.length);
      this.rmTime()
    },
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>